<template>
	<view class="container-flex-auto">
		<Navbar title="历史记录" />

		<view class="content-flex-auto">
			<mescroll-uni ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view v-for="(item, index) in list" :key="index">
					<view class="item-box" @click="itemClick(item)">
						<u-image :src="item.cover.url" width="160rpx" height="220rpx" radius="16rpx"></u-image>
						<view class="flex-1 ml-32 flex flex-column jc-center">
							<view class="flex ai-center jc-between">
								<text class="font-28 font-color">{{ item.video_title }}</text>
							</view>
							<view class="font-24 font-color-2 mt-40">上次看到第{{ item.episode }}集</view>
							<view class="flex jc-between mt-40">
								<text class="font-24 font-color-2">全{{ item.total_plot_num }}集全</text>
								<text class="font-24 font-color-2">{{ item.viewed_total | domPlayNumber }}播放</text>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue'
import Navbar from '@/components/navbar/navbar.vue'
import { queryHistoryList } from '@/api/index.js'

export default {
  components: {
    MescrollUni,
    Navbar,
  },
  mixins: [MescrollMixin],
  data() {
    return {
      total: 0,
      pageNum: 1,
      list: [],
    }
  },
  onLoad(option) {},
  methods: {
    async upCallback(page) {
      const pageNum = page.num // 页码, 默认从1开始
      const pageSize = page.size // 页长, 默认每页10条
      this.pageNum = page.num

      queryHistoryList({ pageNum: pageNum, }).then(res => {
        const {
          data,
          total
        } = res
        const curPageLen = data.length
        if (pageNum == 1) {
          this.list = []
        }
        this.list = this.list.concat(data)
        this.total = total
        this.$forceUpdate()

        this.mescroll.endBySize(curPageLen, total)
      }).catch(() => {
        this.mescroll.endErr()
      })
    },

    reset() {
      this.mescroll.resetUpScroll()
    },

    itemClick(item) {
      const { video_id } = item
      uni.navigateTo({ url: `/pages/player/player?library_id=${video_id}` })
    },

  }
}
</script>

<style lang="scss" scoped>
	.item-box {
		display: flex;
		padding: 30rpx 20rpx;
	}
</style>
